<template>
  <div class="page-commission-detail">
      <div class="page-fixed">
          <div class="header-wrap">
             <div class="header-left">
                 <h1>待发放佣金（元）</h1>
                 <p>{{ totalBalance }}</p>
             </div>
             <div class="header-right">
                 <h1>累计佣金（元）</h1>
                 <p>{{ totalAmount }}</p>
             </div>
          </div>
          <!-- <div class="hint-info">投资佣金将在客户所投资的产品放款后发放至合伙人账户</div> -->
          <div class="line-1px"></div>
          <div class="tab-wrap">
              <div class="tab-li active" @click='toggleTab(tab1)' :class="{'active': tabTxt=='tab1'}">待发佣金</div>
              <div class="tab-li"  @click='toggleTab(tab2)' :class="{'active': tabTxt=='tab2'}">累计佣金</div>
              <div class="unline" :class="{'unline-active': tabTxt=='tab2'}"></div>
          </div>
      </div>
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide">
                  <div class="content-slide tab-con" ref="wrapper" id="wrapper1">
                      <div id="scroller1" v-show="balanceList.length!=0">
                          <table style="border-bottom-width: 1px;" v-bind:key="item.mobile" v-for="item in balanceList">
                            <tr>
                                <td class="color333" :class="{'color999':item.commissionStatus == -1}">{{ item.realname }}（{{ item.mobile }}）</td>
                                <td class="txtnumber">{{ item.amount }}元</td>
                            </tr>
                            <tr>
                                <td class="colorb7">{{ item.time }}</td>
                                <td><div class="txtmsg" :class="{'txtmsg-1':item.commissionStatus == -1,'txtmsg-2':item.commissionStatus == 0,'txtmsg-3':item.commissionStatus == 1,'txtmsg-4':item.commissionStatus == 2 }">{{ ['已失效','待生效','待发放','已入账'][item.commissionStatus +1] }}</div></td>
                            </tr>
                          </table>
                          <div class="scroll-loader" v-show="balanceList.length>=10">{{ txtLoad1 }}</div>
                      </div>
                      <div v-show="balanceList.length==0" class="data-null">
                           <img src="../../public/imgs/invite/noone-img.png">
                           <p>还没有相关订单</p>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide">
                  <div class="content-slide tab-con" id="wrapper2">
                      <div id="scroller2" v-show="totalList.length!=0">
                          <table style="border-bottom-width: 1px;" v-bind:key="item.mobile" v-for="item in totalList">
                            <tr>
                                <td class="color333">{{ item.realname }}（{{ item.mobile }}）</td>
                                <td class="txtnumber">{{ item.amount }}元</td>
                            </tr>
                            <tr>
                                <td class="colorb7">{{ item.time }}</td>
                                <td><div class="txtmsg" :class="{'txtmsg-1':item.commissionStatus == -1,'txtmsg-2':item.commissionStatus == 0,'txtmsg-3':item.commissionStatus == 1,'txtmsg-4':item.commissionStatus == 2 }">{{ ['已失效','待生效','待发放','已入账'][item.commissionStatus +1] }}</div></td>
                            </tr>
                          </table>
                          <div class="scroll-loader" v-show="balanceList.length>=10">{{ txtLoad2 }}</div>
                      </div>
                      <div v-show="totalList.length==0" class="data-null">
                           <img src="../../public/imgs/invite/noone-img.png">
                           <p>还没有相关订单</p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import "@/public/libs/swiper.css";
import Swiper from "@/public/libs/swiper.js";
var AlloyTouch = require("alloytouch");
var Transform = require("css3transform");
var scrollHei1 = null;
var scrollHei2 = null;

export default {
  name: "commission_detail",
  data() {
    return {
      msg: "welcome to 佣金明细",
      tabTxt: "tab1",
      tab1: "tab1",
      tab2: "tab2",
      sessionid: "",
      pageIndex1: 1,
      pageIndex2: 1,
      pageSize: 10,
      loadMoreFlag1: false,
      loadMoreFlag2: false,
      txtLoad1: "上拉加载更多...",
      txtLoad2: "上拉加载更多...",
      totalBalance: "0.00",
      totalAmount: "0.00",
      balanceList: [],
      totalList: []
    };
  },
  created() {
    var sid = this.Uitis.GetLocationParams("sessionid");
    console.log(sid);

    if (sid != null) {
      this.sessionid = sid;
    } else {
      var UserInfo = this.Uitis.getInfo();
      UserInfo.then(res => {
        if (res.uId !== "") {
          this.sessionid = res.sessionid;
        }
      });
    }
  },
  methods: {
    toggleTab(tabTxt) {
      this.tabTxt = tabTxt;
    },
    userRewardList(callback) {
      //待发放
      var self = this;
      this.$http
        .get(this.Interface.getUserReward, {
          params: {
            sessionid: this.sessionid,
            pageNo: this.pageIndex1,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          //alert(JSON.stringify(res.data));
          if(res.data.success) {
            var result = res.data.data;
            self.totalBalance = result.totalBalance;
            self.totalAmount = result.totalAmount;
            var baList = res.data.data.balanceList;
            if ( baList!=null && baList!="" && baList.length != 0) {
              self.pageIndex1 = self.pageIndex1 + 1;
              self.loadMoreFlag1 = result.balanceList.length < 10 ? false : true;
              self.balanceList = self.balanceList.concat(result.balanceList);
              if (callback) callback();
            } else {
              self.loadMoreFlag1 = false;
            }
          } else {
            alert(JSON.stringify(res.data.msg));
          }
          //console.log(res.data);
        })
        .catch(res => {
						this.Toast("网络异常，请刷新后重试~");

        });
    },
    recordRewardList(callback) {
      //累计
      var self = this;
      this.$http
        .get(this.Interface.getRecordReward, {
          params: {
            sessionid: this.sessionid,
            pageNo: this.pageIndex2,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          if(res.data.success) {
            //alert(JSON.stringify(res.data));
            var tList = res.data.data.totalList;
            if ( tList!=null && tList!="" && tList.length != 0) {
              var result = res.data.data;
              self.pageIndex2 = self.pageIndex2 + 1;
              self.loadMoreFlag2 = result.totalList.length < 10 ? false : true;
              self.totalList = self.totalList.concat(result.totalList);
              if (callback) callback();
            } else {
              self.loadMoreFlag2 = false;
            }
          } else {
            alert(JSON.stringify(res.data.msg));
          }

          //console.log(res.data);
        })
        .catch(res => {
					this.Toast("网络异常，请刷新后重试~");
        });
    }
  },
  mounted() {
    var self = this,
      scroller1 = document.querySelector("#scroller1"),
      scrollHei1 = document.querySelector("#scroller1").clientHeight;

    Transform(scroller1, true);

    var AT1 = new AlloyTouch({
      touch: "#wrapper1", //反馈触摸的dom
      vertical: true, //不必需，默认是true代表监听竖直方向touch
      target: document.querySelector("#scroller1"), //运动的对象
      property: "translateY", //被运动的属性
      initialValue: 0,
      bindSelf: true,
      min: 0,
      max: 0,
      change: function(value) {
        //console.log(document.documentElement.clientHeight);
      },
      touchMove: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          if (self.loadMoreFlag1) {
            self.txtLoad1 = "数据正在加载中...";
          } else {
            self.txtLoad1 = "没有更多数据了...";
          }
        } else {
          if (self.loadMoreFlag1) {
            self.txtLoad1 = "上拉加载更多...";
          } else {
            self.txtLoad1 = "没有更多数据了...";
          }
        }
      },
      touchEnd: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          console.log("距离底部还有100像素的时候就加载");
          if (self.loadMoreFlag1) {
            self.userRewardList(function() {
              self.$nextTick(function() {
                var scrollHei1 = document.querySelector("#scroller1")
                  .clientHeight;
                var hei1 =
                  scrollHei1 + 175 > window.innerHeight
                    ? window.innerHeight - scrollHei1 - 250
                    : 0;
                AT1.min = hei1;
              });
            });
          } else {
            self.txtLoad1 = "没有更多数据了...";
          }
        }
      }
    });
    // 加载更多
    self.userRewardList(function() {
      self.$nextTick(function() {
        var scrollHei = document.querySelector("#scroller1").clientHeight;
        var pageFixedHeight = document.querySelector(".page-fixed").clientHeight;
        var hei =
          scrollHei + 175 > window.innerHeight
            ? window.innerHeight - scrollHei - 250
            : 0;
        AT1.min = hei;
        if (self.loadMoreFlag1) {
          self.txtLoad1 = "上拉加载更多数据...";
        } else {
          self.txtLoad1 = "没有更多数据了...";
        }
      });
    });

    var scroller2 = document.querySelector("#scroller2"),
      scrollHei2 = document.querySelector("#scroller2").clientHeight,
      hei2 =
        scrollHei2 > window.innerHeight ? window.innerHeight - scrollHei2 : 0;
    Transform(scroller2, true);

    var AT2 = new AlloyTouch({
      touch: "#wrapper2", //反馈触摸的dom
      vertical: true, //不必需，默认是true代表监听竖直方向touch
      target: document.querySelector("#scroller2"), //运动的对象
      property: "translateY", //被运动的属性
      initialValue: 0,
      bindSelf: true,
      min: 0,
      max: 0,
      change: function(value) {
        //console.log(document.documentElement.clientHeight);
      },
      touchMove: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          if (self.loadMoreFlag2) {
            self.txtLoad2 = "上拉加载更多...";
          } else {
            self.txtLoad2 = "没有更多数据了...";
          }
        } else {
          if (self.loadMoreFlag2) {
            self.txtLoad2 = "上拉加载更多...";
          } else {
            self.txtLoad2 = "没有更多数据了...";
          }
        }
      },
      touchEnd: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          console.log("距离底部还有100像素的时候就加载");
          if (self.loadMoreFlag2) {
            self.recordRewardList(function() {
              self.$nextTick(function() {
                var scrollHei2 = document.querySelector("#scroller2")
                  .clientHeight;
                var hei2 =
                  scrollHei2 + 175 > window.innerHeight
                    ? window.innerHeight - scrollHei2 - 250
                    : 0;
                AT2.min = hei2;
              });
            });
          } else {
            self.txtLoad2 = "没有更多数据了...";
          }
        }
      }
    });
    // 加载更多
    self.recordRewardList(function() {
      self.$nextTick(function() {
        var scrollHei2 = document.querySelector("#scroller2").clientHeight;
        var hei2 =
          scrollHei2 + 175 > window.innerHeight
            ? window.innerHeight - scrollHei2 - 250
            : 0;
        AT2.min = hei2;
        if (self.loadMoreFlag2) {
          self.txtLoad2 = "上拉加载更多数据...";
        } else {
          self.txtLoad2 = "没有更多数据了...";
        }
      });
    });

    this.$nextTick(function() {
      //左右滑动列表功能
      var _this = this;
      var tabsSwiper;
      tabsSwiper = new Swiper(".swiper-container", {
        speed: 400,
        onSlideChangeStart: function() {
          if (tabsSwiper.activeIndex == 0) {
            _this.tabTxt = "tab1";
          } else if (tabsSwiper.activeIndex == 1) {
            _this.tabTxt = "tab2";
          }
        }
      });
      $(".tab-li").on("touchstart mousedown", function(e) {
        e.preventDefault();
        if (tabsSwiper.activeIndex == 0) {
          _this.tabTxt = "tab1";
        } else if (tabsSwiper.activeIndex == 1) {
          _this.tabTxt = "tab2";
        }
        tabsSwiper.slideTo($(this).index());
      });
    });
  }
};
</script>
<style lang="less">
html,
body {
  height: 100%;
}
.page-commission-detail {
    height: 100%;
    box-sizing: border-box;
    background: #f4f4f4;
    .page-fixed {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background: #f4f4f4;
        z-index: 9;
    }
    .header-wrap {
        padding: 50px 0;
        background: #FFF;
        display: flex;
        .header-left,
        .header-right {
            flex: 1;
            text-align: center;
        }
        .header-left {
            border-right: 1px solid #d6d6d6;
        }
        h1 {
            font-size: 30px;
            color: #333;
            margin-bottom: 20px;
        }
        p {
            font-size: 40px;
            color: #f2616d;
        }
    }
    .hint-info {
        font-size: 24px;
        color: #FFF;
        line-height: 50px;
        text-align: center;
        background: #e5b673;
        margin-bottom: 20px;

    }
    .line-1px {
        height: 1px;
        background: #ddd;
    }
    .tab-wrap {
        display: flex;
        background: #FFF;
        height: 98px;
        line-height: 98px;
        position: relative;
        border-bottom: 1px solid #ddd;
        .tab-li {
            flex: 1;
            text-align: center;
            color: #999;
            font-size: 28px;
        }
        .active {
            color: #333;
        }
        .unline {
            width: 50%;
            height: 10px;
            position: absolute;
            left: 0;
            top: 56px;
            transform: translate3d(0,0,0);
            transition: 0.4s 0.1s ease-in-out;
        }
        .unline-active {
            transform: translate3d(100%,0,0);
        }
        .unline:after {
            display: block;
            content: '';
            width: 120px;
            height: 10px;
            margin: 0 auto;
            background: rgba(229,182,115,0.5);

        }
    }
    .tab-con-wrap {
        background: #FFF;

    }
    .colorb7 {
        color: #b7b7b7;
    }
    .color999 {
        color: #999 !important;
    }
    .swiper-container{
        width:100%;
        height: 100%;
        background: #f4f4f4;
        box-sizing: border-box;
        .tab-con {
            table {
              width: 100%;
              padding: 35px 25px;
              background: #fff;
              box-sizing: border-box;
              border-bottom: 1px solid #ddd;
              tr {
                  &:first-child td {
                      font-size: 30px;
                      padding-bottom: 12px;
                  }
                  &:last-child td {
                      font-size: 24px;
                  }
                  td:last-child {
                      text-align: right;
                  }
                  .txtnumber {
                      font-weight: bold;
                      color: #f2616d;
                  }
              }
              .txtmsg {
                  width: 95px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  display: inline-block;
                  border-radius: 3px;
                  font-size: 22px;
              }
              .txtmsg-1 { //已失效状态
                  background: #f4f4f4;
                  color: #999;
              }
              .txtmsg-2 { //待生效
                  background: #f4f4f4;
                  color: #999;
              }
              .txtmsg-3 { //待发放
                  background: #ccc;
                  color: #fff;
              }
              .txtmsg-4 { //已入账
                  background: #e5b673;
                  color: #fff;
              }
            }
        }
        .scroll-loader {
            text-align: center;
            height: 60px;
            line-height: 60px;
        }
        #wrapper1,#wrapper2 {
            position: absolute;
            z-index: 1;
            top: 0;
            width: 100%;
            min-height: 100%;
            overflow: hidden;
            left: 0;
            padding-top: 369px;
            box-sizing: border-box;
        }
        #scroller1,#scroller2 {
          position: absolute;
          z-index: 1;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          width: 100%;
          -webkit-transform: translateZ(0);
          -moz-transform: translateZ(0);
          -ms-transform: translateZ(0);
          -o-transform: translateZ(0);
          transform: translateZ(0);
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          -webkit-text-size-adjust: none;
          -moz-text-size-adjust: none;
          -ms-text-size-adjust: none;
          -o-text-size-adjust: none;
          text-size-adjust: none;
        }
        .data-null {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            img {
                width: 154px;
                max-width: 100%;
            }
            p {
                text-align: center;
                margin-top: 40px;
                font-size: 27px;
                color: #999;
            }
        }
    }
}
</style>
